<template>
    <div id="app">
        <transition
            enter-active-class="animated bounceInDown"
            leave-active-class="animated bounceOutUp"
        >
            <TopBar v-if=" $route.meta.TnavShow" :showSearch.sync="showSearch" />
        </transition>

        <transition
            enter-active-class="animated slideInRight"
            leave-active-class="animated slideOutLeft"
        >
            <keep-alive exclude="detail,search">
                <router-view></router-view>
            </keep-alive>
        </transition>
        <transition
            enter-active-class="animated bounceInUp"
            leave-active-class="animated bounceOutDown"
        >
            <BottomBar v-if=" $route.meta.BnavShow " />
        </transition>

        <transition
            enter-active-class="animated bounceInUp"
            leave-active-class="animated bounceOutDown"
        >
            <SearchComponent v-if="showSearch" :showSearch.sync="showSearch" />
        </transition>
    </div>
</template>
<script>
import TopBar from "./components/TopBar";
import BottomBar from "./components/BottomBar";
import SearchComponent from "./components/SearchComponent";
export default {
    name: "App",
    data() {
        return {
            transitionName: "",
            showSearch: false
        };
    },
    components: {
        TopBar,
        BottomBar,
        SearchComponent
    },
    watch: {},
    methods: {}
};
</script>
<style lang="less" scoped>
#app {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    overflow: hidden;
}
</style>
